<script setup>
import { formatDate } from '@/utils/date';

defineProps({
    blog: {
        type: Object,
        required: true,
    },
});


</script>

<template>
    <div class="blog-card">
        <div class="top">
            <div class="author-category-time">
                <el-icon>
                    <User />
                </el-icon>{{ blog.author }}
                <i class="el-icon-folder"></i>{{ blog.category }}
                <i class="el-icon-time"></i>{{ formatDate(blog.updatedAt) }}
            </div>
        </div>
        <div class="middle">
            <router-link :to="`/blog/${ blog.id }`">
                <h4 class="title">{{ blog.title }}</h4>
            </router-link>

            <p class="description">{{ blog.description }}</p>
        </div>
        <div class="bottom">
            <div class="stats">
                <el-icon>
                    <Pointer />
                </el-icon>{{ blog.likes }}
                <el-icon>
                    <Star />
                </el-icon>{{ blog.favorites }}
                <el-icon>
                    <ChatLineSquare />
                </el-icon>{{ blog.comments }}
            </div>
        </div>
    </div>
</template>
  
  
  
<style scoped>
.blog-card {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    transition: background-color 0.3s ease;
}

.blog-card:hover {
    background-color: #f5f5f5;
}

.top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.author-category-time i {
    margin-right: 5px;
}

.middle {
    margin-bottom: 10px;
}

.title {
    font-size: 20px;
}

.description {
    color: #666666;
}

.bottom {
    display: flex;
    align-items: center;
}

.stats i {
    margin-right: 5px;
}</style>
  